<template>
  <div class="main">
    <div id="box" class="box" ref="box"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts"; //3.当前页面引入
// import { getReportsList } from '../../api/user.js'
import beijing from "@/assets/110000.json";
let box = ref(null);
onMounted(async () => {
  let myChart = echarts.init(box.value);
  echarts.registerMap("beijing", beijing);
  let points = [
    {
      value: [116.4, 39.9],
      itemStyle: {
        color: "#f58414"
      }
    },
    {
      value: [115.9, 39.96],
      itemStyle: {
        color: "#e7ab0b"
      }
    },
    {
      value: [115.98, 39.69],
      itemStyle: {
        color: "#1DE9B6"
      }
    }
  ];
  let geoCoordMap = {  
    '北京': [116.4551, 40.2539],  
    '东城区': [116.418757, 39.917544],  
    '西城区': [116.366794, 39.915309],  
    '朝阳区': [116.486409, 39.921489],  
    '丰台区': [116.286968, 39.863642],  
    '石景山区': [116.195445, 39.914601],  
    '海淀区': [116.310316, 39.956074],  
    '门头沟区': [116.105381, 39.937183],  
    '房山区': [116.139157, 39.735535],  
    '通州区': [116.658603, 39.902486],  
    '顺义区': [116.653525, 40.128936],  
    '昌平区': [116.235906, 40.218085],  
    '大兴区': [116.338033, 39.728908],  
    '怀柔区': [116.635376, 40.32003],  
    '平谷区': [117.122284, 40.13713],  
    '密云区': [116.842444, 40.368488],  
    '延庆区': [115.977756, 40.463885]  
}
let data = [{
   name: '北京',
   value: 500
},
{
   name: '东城区',
   value: 470
},
{
   name: '西城区',
   value: 0
},
{
   name: '朝阳区',
   value: 490
},
{
   name: '丰台区',
   value: null
},
{
   name: '石景山区',
   value: 120
},
{
   name: '海淀区',
   value: 320
},
{
   name: '门头沟区',
   value: 110
},
{
   name: '房山区',
   value: 289
},
{
   name: '通州区',
   value: 37
},
{
   name: '顺义区',
   value: 434
},
{
   name: '昌平区',
   value: 117
},
{
   name: '大兴区',
   value: 64
},
{
   name: '怀柔区',
   value: 354
},
{
   name: '平谷区',
   value: 432
},
{
   name: '密云区',
   value: 190
},
{
   name: '延庆区',
   value: 120
},
]
  let option = {
    title: {
      text: "北京地图"
    },
    tooltip: {
                    show: true,
                    formatter: function(params) {
                        if (params.data) return params.name + '：' + params.data['value']
                    },
                },
                visualMap: {
                    type: 'continuous',
                    text: ['', ''],
                    showLabel: true,
                    left: '50',
                    min: 0,
                    max: 500,
                    inRange: {
                        color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
                    },
                    splitNumber: 0
                },
    geo: {
      show: false,
      map: "beijing",
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false
        }
      }, //
     
                visualMap: {
                    min: 300,
                    max: 12000,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],
                    textStyle: {
                        color: 'white',
                    },
                    calculable: true,
                    colorLightne: [0.8, 100],
                    color: ['#c05050', '#e5cf0d', '#5ab1ef'],
                    dimension: 0,
                },
      roam: true, //
      // zoom: 1.2,//
      scaleLimit: {
        // 设置缩放的比例范围
        min: 1.1, // 最小缩放比例
        max: 3 // 最大缩放比例
      },
      itemStyle: {
        show: true,
        normal: {
          // areaColor: "transparent",
          // borderColor: "#3fdaff",//边框颜色
          borderWidth: 2,//边框宽度
          shadowColor: "rgba(63, 218, 255, 0.5)",//阴影颜色
          shadowBlur: 30//阴影模糊大小
        },
        emphasis: {
          areaColor: "#2B91B7"
        }//高亮时的样式
      }
    },
    series: [
      {
        type: "map",
        tooltip: {
                trigger: 'item',
                show: true,
                formatter: function(params) {
                    if (params.data) {
                        return `${params.name}</br>
                            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>
                            规划数量：${params.data.value}</br>
                            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#5ba2ff"></span>
                            发证数量：${params.data.value}`
                    } else {
                        return;
                    }
                }
            },
        roam: true,
        label: {
          normal: {
            show: true,
            formatter: function(params) {
                    return `${params.data.name}：${params.data.value}`
                },
            textStyle: {
              color: "#fff",
              fontSize: 15,
              fontWeight: 500
            }
          },
          emphasis: {
            textStyle: {
              color: "rgb(183,185,14)"
            }
          }//
        },

        itemStyle: {
          normal: {
            areaColor: "#003669",
            borderColor: "#3fdaff",
            borderWidth: 2,
            shadowColor: "rgba(63, 218, 255,0.6)",
            shadowBlur: 35
          },
          emphasis: {
            areaColor: "#2B91B7"
          }
        },
        // zoom: 1.8,
        map: "beijing", //使用
        data: data
      },
      
      // {
      //   type: "effectScatter",
      //   roam: true, // 启用鼠标滚轮放大缩小功能
      //   coordinateSystem: "geo",
      //   showEffectOn: "render",
      //   zlevel: 1,
      //   rippleEffect: {
      //     period: 15,
      //     scale: 4,
      //     brushType: "fill"
      //   },
      //   hoverAnimation: true,
      //   label: {
      //     normal: {
      //       formatter: "{b}",
      //       position: "right",
      //       offset: [15, 0],
      //       color: "#1DE9B6",
      //       show: true
      //     }
      //   },
      //   itemStyle: {
      //     normal: {
      //       color: "#1DE9B6",
      //       shadowBlur: 20,
      //       shadowColor: "#333"
      //     }
      //   },
      //   symbolSize: 12,
      //   data: points
      // } //地图线的动画效果
    ]
  };
  myChart.setOption(option);
  myChart.on("dblclick", function (params) {
    //当双击事件发生时，清除单击事件，仅响应双击事件
    console.log(params, 99);
    //返回全国地图
  });
  window.onresize = function () {
    console.log("窗口大小发生改变了");
    // echarts适配

    myChart.resize();
  };
});
</script>
<style scoped>
#box {
  width: 1000px;
  height: 600px;
  background-color: rgb(144, 179, 224);
}
.main {
  /* color: rgba(107, 125, 142, 0.1) */
  padding: 10px;

  border-radius: 5px;
  height: 500px;
  margin-top: 10px;
}
</style>
